import React, { useMemo } from 'react';
import Style from './index.module.less';

const Process = (props) => {
  const { status, errorInfoList = [] } = props;
  const processList = ['待审核', '待发货', '已发货'];
  const processStateMap = {
    10: '待审核',
    20: '待发货',
    40: '已发货',
  }
  const otherStateMap = {
    30: '异常',
    50: '已作废',
    51: '被合单',
    52: '被拆分'
  }
  const errorReasonText = useMemo(()=>{
     if(status == 30 && errorInfoList.length){
      const arr = errorInfoList.map(item=>item.errorName);
      return ` (${arr.join(',')})`
     }
  }, [errorInfoList])
  return (
    <>
      <div className={Style.process_wrap}>
        {[10, 20, 40].includes(status) ? processList.map((process, index) => {
          return (
              <div key={process} className={`${Style.process_item} ${process === processStateMap[status] ? Style.process_item_current : ''}`}>
                <span className={Style.process_num}>{index + 1}</span>
                <span className={Style.process_title}>{process}</span>
              </div>
          );
        }) : <div className={Style.spec_process}>{otherStateMap[status]} {errorReasonText}</div>}
      </div>
    </>
  );
};
export default Process;
